<template>
    <div class="app_container">
        <el-card >
            <div slot="header" class="clearfix">
                <el-button type="primary" @click="handleAdd1">&emsp;新增&emsp;</el-button>
                <el-form :inline="true" :model="listQuery" ref="listQuery" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input type="text" v-model="listQuery.keyword" placeholder="用户昵称/用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select filterable v-model="listQuery.group_type" placeholder="用户状态">
                            <el-option
                            v-for="item in userStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select filterable v-model="listQuery.group_type" placeholder="房间状态">
                            <el-option
                            v-for="item in roomStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="item" v-loading="listLoading">
                <el-table ref="dataList" :data="menuList" style="width:100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="id" label="序号"> </el-table-column>
                    <el-table-column prop="type_name" label="用户ID" > </el-table-column>
                    <el-table-column prop="type_name" label="昵称" > </el-table-column>
                    <el-table-column prop="type_name" label="所属公会" > </el-table-column>
                    <el-table-column prop="type_name" label="用户状态" > </el-table-column>
                    <el-table-column prop="type_name" label="房间状态" > </el-table-column>
                    <el-table-column prop="type_name" label="操作时间" > </el-table-column>
                    <el-table-column prop="type_name" label="是否推荐" >
                        <template slot-scope="scope">
                            <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180px">
                        <template slot-scope="scope">
                        <el-button type="text" size="mini" icon="el-icon-delete" @click="handleConfig(scope.row)" plain>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <cus-pagination
                    :total="total"
                    :page.sync="listQuery.page"
                    :limit.sync="listQuery.perPage"
                    @pagination="getList"
                />
            </div>
        </el-card>

        <el-dialog :visible.sync="dialogFormVisible" title="新增" close-on-click-modal=”false“ @close="handleDialogClose('editRulesForm')">
            <el-form :model="editRulesForm" :rules="editRulesFormRules" ref="editRulesForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="用户ID" prop="room_type_name">
                    <el-input type="textarea" v-model="editRulesForm.room_type_name" placeholder="请输入用户ID 用,分割"></el-input>
                </el-form-item>
                <el-form-item label="是否推荐">
                    <el-radio-group v-model="editRulesForm.recommend">
                        <el-radio :label="1">推荐</el-radio>
                        <el-radio :label="2">不推荐</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="添加失败" prop="room_type_name">
                    <el-input type="textarea" v-model="editRulesForm.room_type_name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogFormVisible = false">返回</el-button>
                    <el-button type="primary" @click="submitForm('editRulesForm')">提交</el-button>
                </el-form-item>
                </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            editRulesFormRules:{

            },
            dialogFormVisible:false,
            editRulesForm:{

            },
            menuList:[],
            userStatus:[{value:1,label:'在线'},{value:2,label:'不在线'}],
            roomStatus:[{value:1,label:'在房间'},{value:2,label:'不在房间'}],
            listQuery:{
                page:1,
                perPage:10,

            },
            total:0,
        }
    },
    methods:{
        // 监听dialog关闭时的处理事件
        handleDialogClose(formName) {
            if (this.$refs[formName]) {
                this.$refs[formName].clearValidate(); // 清除整个表单的校验
            }
        },
    }
}
</script>

<style>
[v-cloak] {
        display: none;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }

    .demo-form-inline {
        float: right;
    }

    /deep/ .el-card__header {
        padding-bottom: 0;
    }
</style>
